import { useState, useEffect } from 'react'
import logo from './logo.svg'
import './App.css'
import { Routes, Route, Link, useNavigate } from 'react-router-dom'
import Home from './Home'
import User from './User'
import Detail from './Detail'

function App() {
  const navigate = useNavigate();
  useEffect(() => {
    setTimeout(() => {
      // history.pushState(null,null,'/post/7089997204252786702')不会重新加载
      // js跳转 BOM 原始
      // window.location.href='/post/7089997204252786702'
      navigate('/post/7089997204252786702')
    }, 2000)

  }, [])
  return (
    <div className="App">
      <nav>
        <Link to="/post?id=8089997204252786702">文章</Link>
        <Link to="/post/7089997204252786702">文章</Link>
        <Link to="/user">用户</Link>
      </nav>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path="/post" element={<Detail />} />
        <Route path="/post/:id" element={<Detail />} />
        <Route path="/user" element={<User />} />
        <Route></Route>
        {/* 404page组件 */}
      </Routes>
      {/* BOM location 匹配 组件 DOM渲染 */}
    </div>
  )
}

export default App
